import React, { useEffect, useState } from 'react';
import './index.scss'
import { Button, Table, Modal, Form, Input } from 'antd';
import service from '../../../../api'
import { useNavigate } from 'react-router-dom';

const Advertising = () => {

    var [data, setData] = useState([])
    const [form] = Form.useForm();

    var navigate = useNavigate()


    useEffect(() => {
        viewList()
    }, [])
    var viewList = async () => {
        let res = await service.CJH.view_list()
        console.log(res);
        if (res.status == 200) {
            setData(res.data)
        }
    }

    // 添加打开盒子
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {

        setIsModalOpen(false);
        viewList()
    };

    const handleCancel = () => {
        setIsModalOpen(false);
        viewList()
    };

    // 添加表单
    const onFinish = (values: any) => {
        console.log('Success:', values);
        AddList(values)
        form.setFieldsValue({ title: '', place: '', time: '', state: '' })
    };

    var AddList = async (values: any) => {
        let res = await service.CJH.add_list(values)
        console.log(res);

    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    // 删除
    var remove_list = (id: any) => {
        deleList(id)
        viewList()
    }
    var deleList = async (id: any) => {
        let res = await service.CJH.Delete_list({ id })
        console.log(res);

    }
    // 跳转
   var router_page=(id:any)=>{
    // navigate('/index/Cjh')
    navigate({pathname: '/index/Cjh',search:`id=${id}` })
   }
    const columns = [
        {
            title: '广告名称',
            dataIndex: 'title',
            key: 'title',
            render: (text: any, record: any, index: any) => <div>{record.title}</div>,
        },
        {
            title: '广告位置',
            dataIndex: 'place',
            key: 'place',
            render: (text: any, record: any, index: any) => <div>{record.place}</div>,
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time',
            render: (text: any, record: any, index: any) => <div>{record.time}</div>,
        },
        {
            title: '发布状态',
            dataIndex: 'state',
            key: 'state',
            render: (text: any, record: any, index: any) => <div>{record.state}</div>,
        },
        {
            title: '操作',
            dataIndex: 'exit',
            key: 'exit',
            render: (text: any, record: any, index: any) => <div className='exit'><span onClick={()=>{router_page(record.id)}}>查看数据</span><span>编辑</span><span onClick={() => { remove_list(record.id) }}>删除</span></div>,
        },
    ]

    return (
        <div>
            <div className="top">
                <Button type="primary" onClick={showModal} className='button'> 新建广告</Button>
                <Modal title="新建广告" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="广告名称"
                            name="title"
                            rules={[{ required: true, message: 'Please input title!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="广告位置"
                            name="place"
                            rules={[{ required: true, message: 'Please input place!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="创建时间"
                            name="time"
                            rules={[{ required: true, message: 'Please input time!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="发布状态"
                            name="state"
                            rules={[{ required: true, message: 'Please input state!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                新建广告
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
            <div className="bottom">
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Advertising;